<template>
	<view class="container">
		<view class="headZone">
			<!-- 排队状态索引栏 -->
			<up-subsection @change="resetQueryData" :list="queueList" :current="currentQueueStatus"></up-subsection>
			<!-- 日期选择栏 -->
			<view class="dateSelectZone">
				<uni-datetime-picker placeholder="起始日期" class="date-picker" type="date" :clear-icon="true" v-model="queryForm.startTime" @change="selectStartDateChange" />
				<uni-datetime-picker placeholder="终止日期" class="date-picker" type="date" :clear-icon="true" v-model="queryForm.endTime" @change="selectEndDateChange" />
			</view>
		</view>
		<!-- 预约信息展示 -->
		<view class="bookingListZone" v-if="queryDataList.length > 0">
			<view class="cellGroupZone" v-for="(item,index) in queryDataList" :key="item.bookingId">
				<view class="cellBtnItemZone">
					<view class="cellBtnItem">
						<up-button text="撤销" @click="removeData(item)" :disabled="item.queueStatus >= 1 " type="error" plain="true" size="mini"></up-button>
						<up-button text="修改" @click="updateData(item)" :disabled="item.queueStatus >= 1 " type="primary" plain="true" size="mini"></up-button>
					</view>
				</view>
				<view class="cellItemZone">
					<view class="cellItem">姓名</view>
					<view>{{ item.name }}</view>
				</view>
				<view class="cellItemZone">
					<view class="cellItem">性别</view>
					<view>{{ item.gender === '0' ? '男' : '女' }}</view>
				</view>
				<view class="cellItemZone">
					<view class="cellItem">年龄</view>
					<view>{{ item.age }}</view>
				</view>
				<view class="cellItemZone">
					<view class="cellItem">手机号</view>
					<view>{{ item.phoneNumber }}</view>
				</view>
				<view class="cellItemZone">
					<view class="cellItem">来诊时间</view>
					<view>{{ item.appointmentTime }}</view>
				</view>
				<view class="cellItemZone">
					<view class="cellItem">排队状态</view>
					<view>
						<up-tag plain :text="item.queueStatus === '0' ? '排队中' : item.queueStatus === '1' ? '就诊中' : '已完成'" 
						:type="item.queueStatus === '0' ? 'primary' : item.queueStatus === '1' ? 'warning' : 'success'"></up-tag>
					</view>
				</view>
				<view class="cellItemZone">
					<view class="cellItem">备注</view>
					<view>
						<up-textarea disabled="true" maxlength="50" v-model="item.message" placeholder="" count ></up-textarea>
					</view>
				</view>
				<view class="bookingListBottomZone">
					<view class="queuingShowBottom" v-if="item.aheadCount > 0 && item.queueStatus === '0'">
						<uni-icons type="staff-filled" color="#1989fa" size="30"></uni-icons>
					    <text>前方还有<text style="color: red;">{{ item.aheadCount }}</text>人，请耐心等待~</text>
					</view>
					<view class="queuingShowBottom" v-else-if="item.queueStatus === '0'">
						<uni-icons type="spinner-cycle" color="#1989fa" size="30"></uni-icons>
					    <text style="color: #1989FA;">等待医生呼叫就诊...</text>
					</view>
					<view class="queuingShowBottom" v-else-if="item.queueStatus === '1'">
						<uni-icons type="auth" color="#1989fa" size="30"></uni-icons>
					    <text style="color: #1989FA;">已排到您就诊！</text>
					</view>
				</view>
			</view>
			<view v-show="isQueryFinsh" style="color: #c1c4cb;text-align: center;">
				已无更多数据
			</view>
		</view>
		<view class="emptyZone" v-else>
			<u-empty text="暂无数据" mode="search"></u-empty>
		</view>
		<!-- 悬浮按钮组件 -->
		<FloatPopupMenu :menuItems="customMenuItems" buttonBgColor="linear-gradient(165deg, #FF6B6B 0%, #FFD166 100%)"
		    activeButtonBgColor="linear-gradient(165deg, #FFD166 0%, #FF6B6B 100%)" iconColor="#333333"
		    textColor="#333333" @menuClick="onMenuClick">
		</FloatPopupMenu>
	</view>
</template>

<script setup>
	import { ref,onMounted } from 'vue';
	import { bookinGetListService,bookingDeleteInfoService,exportExcelWeb,exportExcel } from '@/api/booking.js'
	import { useCustomerStore } from '@/stores/customer.js'
	import { onLoad } from "@dcloudio/uni-app"
	import FloatPopupMenu from "@/uni_modules/stars-Float-Popup-Menu/components/stars-Float-Popup-Menu/FloatPopupMenu.vue"
	import { onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app'
	import { queryParams } from '../../uni_modules/uview-plus';
	import { baseUrl } from '@/utils/request.js'
	
	const customerStore = useCustomerStore();
	const queueList = ref(['全部', '排队中', '就诊中','已完成']);
	const queryDataList = ref([]);
	const queryForm = ref({
		page: 1,//当前页数
		pageSize: 3,//每页显示条数
		// selectDate: '',
		startTime: '',
		endTime: ''
	})
	const total = ref(0);
	const currentQueueStatus = ref(1);//当前排队状态 0-全部 1-排队中 2-就诊中 3-已完成
	const isQueryFinsh = ref(false);//是否已经查询完所有数据标识
	
	// 重置数据
	const resetData = async() => {
		queryDataList.value = [];
		queryForm.value.page = 1;
		queryForm.value.pageSize = 3;
		total.value = 0;
		isQueryFinsh.value = false;
	}
	
	// 重新查询数据
	const resetQueryData = async (val=currentQueueStatus.value) => {
		currentQueueStatus.value = val;
		await resetData();
		await queryData(val);
	}

	// 获取排队数据
	const queryData = async (val=1) => {
		console.log("val====>",val);
		let params = {
		    customerId: customerStore.customer.customerId,
		    queueStatus: val-1,
			page: queryForm.value.page,
			pageSize: queryForm.value.pageSize,
			startTime: queryForm.value.startTime,
			endTime: queryForm.value.endTime
		}
		if(val === 0){
			// 获取全部信息
				params.queueStatus = '';
		}
		const res = await bookinGetListService(params);
		console.log(res);
		if(res.data.code !== 200){
			uni.showToast({
				title: res.data.msg,
				icon: 'error'
			})
			return;
		}
		if(res.data.data.records.length === 0){
			isQueryFinsh.value = true;
		}
		res.data.data.records.map(item => {
			queryDataList.value.push(item);
		})
		// queryDataList.value = res.data.data.records;
		total.value = res.data.data.total;
	}
	
	// ============悬浮按钮============
	const customMenuItems = [
	    { icon: 'home', text: '首页', menuBgColor: "linear-gradient(165deg, #2B5BDB 0%, #00C9FF 100%)", textColor: "#fff", iconColor: "#fff" },
	    { icon: 'home', text: '预约', menuBgColor: "linear-gradient(165deg, #2B5BDB 0%, #00ff00 100%)", textColor: "#fff", iconColor: "#fff" },
	    { icon: 'download', text: '导出', menuBgColor: "linear-gradient(165deg, #FF6B6B 0%, #FFD166 100%)", textColor: "#333333", iconColor: "#333333" },
	];

	const onMenuClick = (item) => {
	    let params = {
			customerId: customerStore.customer.customerId,
			queueStatus: currentQueueStatus.value === 0 ? '' : currentQueueStatus.value - 1,
			startTime: queryForm.value.startTime,
			endTime: queryForm.value.endTime
		}
		if(item.text === '导出'){
			console.log("exportParams====>",params);
			exportExcel(params);
		}else if(item.text === '预约'){
			uni.navigateTo({
				url: '/pages/booking/booking'
			})
		}else if(item.text === '首页'){
			uni.switchTab({
				url: '/pages/home/home'
			})
		}
	    console.log('点击了菜单项:', item);
	};
	// ============悬浮按钮============
	
	
	// 下拉刷新事件
	onPullDownRefresh(async () => {
		await resetQueryData(currentQueueStatus.value);
		uni.stopPullDownRefresh();
	})
	
	// 触底加载事件
	onReachBottom(async() => {
		console.log("已触底");
		console.log("isQueryFinsh.value=====>",isQueryFinsh.value);
		if(!isQueryFinsh.value){
			queryForm.value.page += 1;
			await queryData(currentQueueStatus.value);
		}
	})
	
	// 更改选择的起始时间
	const selectStartDateChange = async (val) => {
		console.log("更改的日期为===>",val);
		if(val){
			queryForm.value.startTime = val + ' 00:00:00';
		}else {
			queryForm.value.startTime = '';
		}
		await resetQueryData();
	}
	
	// 更改选择的终止时间
	const selectEndDateChange = async (val) => {
		console.log("更改的日期为===>",val);
		if(val){
			queryForm.value.endTime = val + ' 23:59:59';
		}else {
			queryForm.value.endTime = '';
		}
		await resetQueryData();
	}
	
	// 修改预约数据
	const updateData = async (item) => {
		uni.showModal({
			title: '温馨提示',
			content: '是否修改'+item.name+"的预约订单？",
			success: function (res) {
				if(res.confirm){
					uni.navigateTo({
						url: '/pages/booking/booking?updateData='+JSON.stringify(item)
					})
				}else if(res.cancel){
				}
			}
		})
	}
	
	// 撤销预约数据
	const removeData = async (item) => {
		console.log("bookingId====>",item.bookingId);
		uni.showModal({
			title: '温馨提示',
			content: '是否撤销'+item.name+"的预约订单？",
			success: async function (res) {
				if(res.confirm){
					const cancelRes = await bookingDeleteInfoService(item.bookingId);
					if(cancelRes.data.code === 200){
						// 刷新页面数据
						await resetQueryData(currentQueueStatus.value);
						uni.showToast({
							title: '撤销预约成功!',
							icon: 'success'
						})
					}else {
						// 提示异常
						uni.showToast({
							title: cancelRes.data.msg,
							icon: 'error'
						})
					}
				}else if(res.cancel){
				}
			}
		})
	}
	
	// 进入页面自动查询
	onLoad(() => {
		queryData();
	})
</script>

<style lang="scss">
.container{
	height: 100%;
	.headZone{
		position: fixed;
		left: 0;
		top: 0; /* 设置你想要的距离 */
		width: 100%;
		z-index: 1000; /* 确保该元素在其他内容之上 */
		.dateSelectZone{
			background: #fff;
			display: flex;
			justify-content: space-around;
			:deep(.uni-date){
				
			}
		}
	}
	.emptyZone{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bookingListZone{
		padding: 10px;
		margin-top: 68px;
		.cellGroupZone{
			background-color: #fff;
			border-radius: 2.13vw;
			box-sizing: border-box;
			padding: 10px 10px 0px 10px;
			margin-bottom: 20px;
			.cellItemZone{
				padding: 10px 0;
				border-bottom: 1px solid #ebebec;
				display: flex;
				.cellItem{
					width: 70px;
					margin-right: 50px;
				}
				:deep(.u-textarea){
					width: 200px;
					color: black;
				}
			}
			.cellBtnItemZone{
				display: flex; 
				justify-content: flex-end;
				.cellBtnItem{
					display: flex;
					justify-content: flex-end;
					width: 200px;
					:deep(.u-button){
						width: 50px;
						margin: 0 0 0 7px;
					}
				}
			}
		}
		.bookingListBottomZone{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50px;
			.queuingShowBottom{
			    display: flex;
				flex-direction: row;
				align-items: center;
			}
		}
	}
}
</style>
